<template>
  <a-modal title="表单"
           v-model:visible="visible"
           :confirmLoading="confirmLoading"
           cancelText="取消"
           okText="确定"
           @ok="onFinish"
           style="min-width: 50%;"
           @cancel="()=>{visible=false}">
    <a-spin :spinning="confirmLoading">
      <a-form ref="formRef" :model="form" :labelCol="{span:6}">
        <a-row :gutter="24" v-for="(value,index) in detailRow" :key="index">
          <a-col :span="24 / value.length" v-for="(item,i) in value" :key="i">
            <a-form-item v-if="item.e_type == 'select'" :label="item.title" :name="item.field" :rules="item">
              <a-select v-model:value="form[item.field]" style="width: 200px" :placeholder="item.title"
                        :options="item.data" allow-clear/>
            </a-form-item>
            <a-form-item v-else-if="item.e_type == 'selectList'" :label="item.title" :name="item.field" :rules="item">
              <a-select v-model:value="form[item.field]" mode="multiple" style="width: 100%" :placeholder="item.title"
                        :options="item.data" allow-clear/>
            </a-form-item>
            <a-form-item v-else-if="item.e_type == 'number'" :label="item.title" :name="item.field" :rules="item">
              <a-input-number style="width:100%" v-model:value="form[item.field]" :placeholder="item.title"
                              allow-clear/>
            </a-form-item>
            <a-form-item v-else-if="item.e_type == 'radio'" :label="item.title" :name="item.field" :rules="item">
              <a-radio-group v-model:value="form[item.field]">
                <a-radio v-for="rad in item.data" :key="rad" :value="rad.value">{{ rad.key }}</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item v-else-if="item.e_type == 'textarea'" :label="item.title" :name="item.field" :rules="item">
              <a-textarea v-model:value="form[item.field]" :placeholder="item.title" allow-clear/>
            </a-form-item>
            <a-form-item v-else-if="item.e_type == 'date'" :label="item.title" :name="item.field" :rules="item">
              <a-date-picker v-model:value="form[item.field]" value-format="YYYY-MM-DD" :placeholder="item.title"/>
            </a-form-item>
            <a-form-item v-else-if="item.e_type == 'img'" :label="item.title" :name="item.field" :rules="item">
              <upload-img v-model="form[item.field]" urlType="web"/>
            </a-form-item>
            <a-form-item v-else-if="item.e_type == 'switch'" :label="item.title" :name="item.field" :rules="item">
              <a-switch v-model:checked="form[item.field]" :unCheckedValue="0" :checkedValue="1"/>
            </a-form-item>
            <a-form-item v-else-if="item.e_type == 'editor'" :label="item.title" :name="item.field">
              <Editor v-if="visible" v-model="form[item.field]" :index="index+'-'+i"/>
            </a-form-item>
            <a-form-item v-else :label="item.title" :name="item.field" :rules="item">
              <a-input v-model:value="form[item.field]" :placeholder="item.title" allow-clear/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script setup>
import {ref, nextTick} from "vue";
import {http} from '@/axios/'
import {message} from "ant-design-vue";
import {detailRow} from '../ranks'
import UploadImg from '@/components/UploadImg/index.vue'
import Editor from '@/components/Editor/index.vue'

const url = import.meta.env.VITE_APP_PublishRootUrl
const visible = ref(false)
const confirmLoading = ref(false)
const form = ref({})
const formRef = ref()
const props = defineProps({
  getParTable: {
    type: Function,
    default: () => {
    }
  }
})
async function openForm(id, type) {
    try {
        init()
        if (id && type == 'edit') {
            const { Success, Msg, Data } = await http.post('/%areaName%/%SubentityName%/GetTheData', { id })
            if (Success) {
                form.value = Data
            } else {
                message.warning(Msg)
            }
        }
        if (type == 'add') {
            form.value = { ...form.value, #ParentId: id }
        }
    } catch (error) {
        console.log("[openForm error]:" + error.message)
    }
}


defineExpose({openForm})

function init() {
  visible.value = true
  form.value = {}
  nextTick(() => {
    formRef.value.resetFields()
  })
}

async function onFinish() {
  try {
    const params = await formRef.value.validateFields()
    confirmLoading.value = true
      const { Success, Msg } = await http.post("/%areaName%/%SubentityName%/SaveData", form.value)
    confirmLoading.value = false
    if (Success) {
      message.success('操作成功!')
      props.getParTable();
      visible.value = false
    } else {
      message.error(Msg)
    }
  } catch (error) {
    console.log("[表单校验 error]:", error.message);
    if (error.message) {
      message.error("服务器异常!")
    }
  }
}
</script>